<template>
    <div>
        <Breadcrumb>
            <Breadcrumb-item href="/">
                <Icon type="ios-home-outline"></Icon> 配置管理
            </Breadcrumb-item>
            <Breadcrumb-item href="">
                <Icon type="social-buffer-outline"></Icon> 网站配置
            </Breadcrumb-item>
            <Breadcrumb-item>
                <Icon type="pound"></Icon> 技师端配置
            </Breadcrumb-item>
        </Breadcrumb>
        <!-- <canvas ref="canvas" width="400" height="400"></canvas> -->
        <Form ref="formValidate" :label-width="100" style="margin-top: 20px;">
            <FormItem label="城市">
                <CheckboxGroup v-model="configInfo.open_city">
                    <Checkbox :label="val.id" v-for="val in List" :key="val.id">{{ val.name }}</Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            configInfo: {
                open_city: [],
            },
            List: [],
        }
    },
    methods: {
        getConfigInfo() {
            this.$axios('/admin/config/getConfigInfo', { type: 2 }).then(res => {
                this.configInfo = res;
            });
        },
        handleSubmit(name) {
            console.log('aaaa', this.configInfo);
            this.$axios('/admin/config/setConfig', this.configInfo).then(res => {
                this.$Message.success('保存成功');
                this.getConfigInfo();
            })
        },
        getCityList() {
            this.$axios('/admin/config/getCityList').then(res => {
                this.List = res;
            })
        },
    },
    created() {
        this.getCityList();
        this.getConfigInfo();
    },

}

</script>
<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>